<template>
  <div id="PartyOne">
    <div class="list-div" v-if="show">
      <ul class="list-ul">
        <li v-for="(item, index) in news_list" :key="'party_' + index">
          <router-link  v-bind:key="item.id" :to="{path:'/ColumnbuildingGarden/ColumnOne/NewsInfo?id='+item.id}" class="news-link" >
              <span v-html="item.title" :title="item.title"></span>
          </router-link>
          <span>【{{item.createDate | getTime}}】</span>
        </li>
      </ul>
    </div>
    <div class="pageInfo" v-if="show">
       <Page class="page-list" :total="countNum" show-total :current="curPageIndex" :page-size="pageSize" @on-change="changeHandle"></Page>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
  import baseConfig from "../../publicLib/baseConfig/baseConfig";
  import {Storage} from '../../publicLib/utils-lib/main'


  let localStorage = new Storage('localStorage');

  export default {
    name: 'PartyOne',
    data () {
      return {
        news_list:[], //baseConfig.partyOne,
        curPageIndex: 1,
        countPage: 10,
        countNum: 100,
        pageSize: 4,
        show: true
      }
    },
    filters: {
       getTime: function (value) {
          return value.split(' ')[0]
       }
    },
    watch: {
      /* 监听路由 */
      $route (to, from) {
        if (to.name === 'ColumnOne') {
          this.show = true;
        }
        else{
          this.show = false;
        }

        //缓存当前页
        localStorage.setItem('ColumnOneShow', this.show)
      }
    },
    methods: {
       getNewsList (index) {
          this.$fetch('newslist', {newstypes: '13',pageNo: index})
             .then(response => {
                //成功获取服务器数据
                if (response.code === "200") {
                    let data = response.data;
                    this.curPageIndex = data.pageNo;
                    this.countPage = data.page_num;
                    this.countNum = data.count;
                    this.pageSize = data.pageSize;

                    this.news_list = [];
                    let ary = data.list;
                    let len = ary.length;

                    for (let i = 0; i < len; i++) {
                         this.news_list.push(ary[i]);
                    }
                }
             }
          )
       },
       /* 分页改变事件 */
       changeHandle (curIndex) {
           this.curPageIndex = curIndex;
           this.getNewsList(curIndex);
       }
    },
    mounted () {
      if(this.$route.query.show == 'true'){
        this.show = true;
      }else{
        this.show = false;
      }
       this.getNewsList(this.curPageIndex);
       /* 如果现实的是详情页面，刷新浏览器仍然显示详情页 */
       let show = localStorage.getItem('ColumnOneShow');

          if (show === 'false') {
              this.show = false;
          }
    },
    destroyed () {
      localStorage.removeItem('ColumnOneShow')
    }
  }
</script>

<style lang="scss" scoped>
  @import 'publicLib/scss/defualtScss.scss';

  #PartyOne{
    width: 100%;
    font-size: 1rem;

    .list-div{
      width: 95%;
      margin: 0 auto;
      text-align: left;
      font-size: 1rem;

      .list-ul{
        margin: 2rem 0;
        height:22.5rem;

        li{
          width: 90%;
          line-height: 2rem;
          border-bottom: #D6D6D6 0.09rem dashed;
          list-style-type: square;


          .news-link{
            span{
              width: 80%;
              display: block;
              color: $data-detail-font-color;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              float: left;
            }
          }

          &:hover{
            cursor: pointer;

            span, a{
              color: $default-layout-color;
            }
          }
        }

        span{
          float: right;
        }
      }
    }

    .pageInfo{
      .page-list{
        float: right;
        margin-right: 1rem;
      }
    }
  }
</style>


